<template>
  <div class="header">
    <div class="search-box">
      <input
        class="search-txt"
        v-model="input"
        type="text"
        id="inp"
        @keyup.enter="searchFun"
      />
      <input class="search-btn" type="button" id="btn" value="A" @click="searchFun" />
    </div>

    <div class="color">
      <el-color-picker v-model="color" show-alpha />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "vue";
import { storage } from "@/stores/storage";
import router from "../router";
export default defineComponent({
  name: "header",
  setup() {
    const input = ref("");
    document.addEventListener("enter", searchFun);
    let store = storage();
    let color = ref("");
    function searchFun() {
      if (input.value) {
        store.setSearchKeyword(input.value);
        store.setSearchType(1);
        router.push({
          path: "/search",
        });
      } else {
        ElMessage("请输入内容~");
      }
    }
    watch(
      () => color.value,
      (v1) => {
        if (v1) {
          store.setColor(color.value);
        }
      },
      { deep: true, immediate: true }
    );
    return {
      input,
      searchFun,
      color,
    };
  },
});
</script>

<style scoped>
.header {
  width: 1000px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
}
.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  height: 30px;
  border: 10px;
  border-radius: 40px;
  padding: 2px;
}
.search-box:hover .search-txt {
  width: 240px;
  text-align: center;
  padding: 2px 10px;
}
.search-box:hover .search-btn {
  color: white;
  background: black;
}
.search-btn {
  transition: 0.5s;
  font-size: 25px;
  color: black;
  float: right;
  width: 30px;
  height: 30px;
  border: 10px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin-right: 3px;
}
.search-txt {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: rgb(0, 0, 0);
  font-size: 20px;
  transition: 0.6s;
  line-height: 30px;
  width: 0px;
  text-align: center;
  font-style: oblique;
  font-family: 微软雅黑;
  width: 240px;
}
.color {
  position: absolute;
  top: 10px;
  right: 30px;
  width: 20px;
}
</style>
